<template>
  <div class="dormitory-checkout">
    <div class="header">
      <router-link to="/main/wuye/dormitory/process" class="back-btn">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </router-link>
      <h2>退宿办理</h2>
      <div class="header-actions">
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增退宿</el-button>
      </div>
    </div>

    <div class="content">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="待办理" name="pending">
          <el-table :data="pendingList" style="width: 100%">
            <el-table-column prop="applyNo" label="申请编号" width="180"></el-table-column>
            <el-table-column prop="applicant" label="申请人" width="120"></el-table-column>
            <el-table-column prop="roomNo" label="宿舍号" width="120"></el-table-column>
            <el-table-column prop="bedNo" label="床位号" width="120"></el-table-column>
            <el-table-column prop="checkoutTime" label="预计退宿时间" width="180"></el-table-column>
            <el-table-column prop="reason" label="退宿原因" width="180"></el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
                <el-button size="mini" type="primary" @click="handleCheckout(scope.row)">办理</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="已办理" name="completed">
          <el-table :data="completedList" style="width: 100%">
            <el-table-column prop="applyNo" label="申请编号" width="180"></el-table-column>
            <el-table-column prop="applicant" label="申请人" width="120"></el-table-column>
            <el-table-column prop="roomNo" label="宿舍号" width="120"></el-table-column>
            <el-table-column prop="completionTime" label="办理时间" width="180"></el-table-column>
            <el-table-column prop="handler" label="经办人" width="120"></el-table-column>
            <el-table-column prop="status" label="状态" width="120">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status === '正常' ? 'success' : 'warning'">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 详情对话框 -->
    <el-dialog title="退宿详情" :visible.sync="detailDialogVisible" width="60%">
      <div class="checkout-detail" v-if="currentCheckout">
        <el-descriptions title="基本信息" :column="2" border>
          <el-descriptions-item label="申请编号">{{ currentCheckout.applyNo }}</el-descriptions-item>
          <el-descriptions-item label="申请人">{{ currentCheckout.applicant }}</el-descriptions-item>
          <el-descriptions-item label="宿舍号">{{ currentCheckout.roomNo }}</el-descriptions-item>
          <el-descriptions-item label="床位号">{{ currentCheckout.bedNo }}</el-descriptions-item>
          <el-descriptions-item label="入住时间">{{ currentCheckout.checkinTime }}</el-descriptions-item>
          <el-descriptions-item label="预计退宿时间">{{ currentCheckout.checkoutTime }}</el-descriptions-item>
        </el-descriptions>

        <div class="detail-section">
          <h4>退宿原因</h4>
          <p>{{ currentCheckout.reason }}</p>
        </div>

        <div class="detail-section" v-if="currentCheckout.checkoutInfo">
          <h4>退宿信息</h4>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="办理时间">{{ currentCheckout.checkoutInfo.time }}</el-descriptions-item>
            <el-descriptions-item label="经办人">{{ currentCheckout.checkoutInfo.handler }}</el-descriptions-item>
            <el-descriptions-item label="水表读数">{{ currentCheckout.checkoutInfo.waterMeter }}</el-descriptions-item>
            <el-descriptions-item label="电表读数">{{ currentCheckout.checkoutInfo.electricityMeter }}</el-descriptions-item>
            <el-descriptions-item label="水费">{{ currentCheckout.checkoutInfo.waterFee }}元</el-descriptions-item>
            <el-descriptions-item label="电费">{{ currentCheckout.checkoutInfo.electricityFee }}元</el-descriptions-item>
          </el-descriptions>
          <p class="checkout-remark">备注：{{ currentCheckout.checkoutInfo.remark }}</p>
        </div>
      </div>
    </el-dialog>

    <!-- 退宿办理对话框 -->
    <el-dialog title="退宿办理" :visible.sync="checkoutDialogVisible" width="50%">
      <el-form :model="checkoutForm" label-width="100px">
        <el-form-item label="水表读数">
          <el-input-number v-model="checkoutForm.waterMeter" :min="0" :precision="2"></el-input-number>
          <span class="unit">立方米</span>
        </el-form-item>

        <el-form-item label="电表读数">
          <el-input-number v-model="checkoutForm.electricityMeter" :min="0" :precision="2"></el-input-number>
          <span class="unit">度</span>
        </el-form-item>

        <el-form-item label="水费">
          <el-input-number v-model="checkoutForm.waterFee" :min="0" :precision="2"></el-input-number>
          <span class="unit">元</span>
        </el-form-item>

        <el-form-item label="电费">
          <el-input-number v-model="checkoutForm.electricityFee" :min="0" :precision="2"></el-input-number>
          <span class="unit">元</span>
        </el-form-item>

        <el-form-item label="设施检查">
          <el-checkbox-group v-model="checkoutForm.facilities">
            <el-checkbox label="门锁完好">门锁完好</el-checkbox>
            <el-checkbox label="家具完好">家具完好</el-checkbox>
            <el-checkbox label="电器完好">电器完好</el-checkbox>
            <el-checkbox label="墙面完好">墙面完好</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="备注">
          <el-input type="textarea" v-model="checkoutForm.remark" rows="3"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="checkoutDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitCheckout">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 新增退宿对话框 -->
    <el-dialog title="新增退宿申请" :visible.sync="addDialogVisible" width="50%">
      <el-form :model="addForm" ref="addForm" :rules="addRules" label-width="100px">
        <el-form-item label="申请人" prop="applicant">
          <el-input v-model="addForm.applicant" placeholder="请输入申请人姓名"></el-input>
        </el-form-item>
        
        <el-form-item label="宿舍号" prop="roomNo">
          <el-input v-model="addForm.roomNo" placeholder="请输入宿舍号"></el-input>
        </el-form-item>
        
        <el-form-item label="床位号" prop="bedNo">
          <el-input v-model="addForm.bedNo" placeholder="请输入床位号"></el-input>
        </el-form-item>
        
        <el-form-item label="预计退宿时间" prop="checkoutTime">
          <el-date-picker
            v-model="addForm.checkoutTime"
            type="datetime"
            placeholder="选择预计退宿时间"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        
        <el-form-item label="退宿原因" prop="reason">
          <el-input
            type="textarea"
            v-model="addForm.reason"
            rows="3"
            placeholder="请输入退宿原因">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAdd" :loading="submitting">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'pending',
      pendingList: [],
      completedList: [],
      detailDialogVisible: false,
      checkoutDialogVisible: false,
      currentCheckout: null,
      checkoutForm: {
        waterMeter: 0,
        electricityMeter: 0,
        waterFee: 0,
        electricityFee: 0,
        facilities: [],
        remark: ''
      },
      addDialogVisible: false,
      submitting: false,
      addForm: {
        applicant: '',
        roomNo: '',
        bedNo: '',
        checkoutTime: '',
        reason: ''
      },
      addRules: {
        applicant: [
          { required: true, message: '请输入申请人姓名', trigger: 'blur' }
        ],
        roomNo: [
          { required: true, message: '请输入宿舍号', trigger: 'blur' }
        ],
        bedNo: [
          { required: true, message: '请输入床位号', trigger: 'blur' }
        ],
        checkoutTime: [
          { required: true, message: '请选择预计退宿时间', trigger: 'change' }
        ],
        reason: [
          { required: true, message: '请输入退宿原因', trigger: 'blur' },
          { min: 10, message: '退宿原因不能少于10个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // TODO: 从后端获取待办理和已办理列表
    this.pendingList = [
      {
        applyNo: 'SS202403110001',
        applicant: '张三',
        roomNo: '101',
        bedNo: '1',
        checkoutTime: '2024-03-15',
        reason: '工作调动'
      }
    ]
  },
  methods: {
    viewDetail(row) {
      this.currentCheckout = row
      this.detailDialogVisible = true
    },
    handleCheckout(row) {
      this.currentCheckout = row
      this.checkoutForm = {
        waterMeter: 0,
        electricityMeter: 0,
        waterFee: 0,
        electricityFee: 0,
        facilities: [],
        remark: ''
      }
      this.checkoutDialogVisible = true
    },
    submitCheckout() {
      if (this.checkoutForm.facilities.length < 4) {
        this.$message.warning('请完成所有设施检查项目')
        return
      }

      // TODO: 提交退宿信息到后端
      const checkoutInfo = {
        ...this.checkoutForm,
        handler: '管理员',
        time: new Date().toLocaleString()
      }

      this.currentCheckout.checkoutInfo = checkoutInfo
      this.currentCheckout.status = '正常'
      this.currentCheckout.completionTime = checkoutInfo.time
      this.currentCheckout.handler = checkoutInfo.handler

      // 从待办理列表移动到已办理列表
      const index = this.pendingList.findIndex(item => item.applyNo === this.currentCheckout.applyNo)
      if (index > -1) {
        this.pendingList.splice(index, 1)
        this.completedList.unshift(this.currentCheckout)
      }

      this.$message.success('退宿办理完成')
      this.checkoutDialogVisible = false
    },
    handleAdd() {
      this.addDialogVisible = true;
      this.addForm = {
        applicant: '',
        roomNo: '',
        bedNo: '',
        checkoutTime: '',
        reason: ''
      };
    },
    submitAdd() {
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          try {
            this.submitting = true;
            
            // 构造新的退宿申请数据
            const newCheckout = {
              applyNo: this.generateApplyNo(),
              ...this.addForm,
              checkinTime: new Date().toLocaleDateString() // 这里用当前日期模拟，实际应从系统获取
            };
            
            // TODO: 调用后端API保存数据
            // await this.$http.post('/api/dormitory-checkout/add', newCheckout);
            
            // 添加到待办理列表
            this.pendingList.unshift(newCheckout);
            
            this.$message.success('新增退宿申请成功');
            this.addDialogVisible = false;
          } catch (error) {
            this.$message.error('新增失败：' + error.message);
          } finally {
            this.submitting = false;
          }
        }
      });
    },
    generateApplyNo() {
      const date = new Date();
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const random = String(Math.floor(Math.random() * 1000)).padStart(3, '0');
      return `TS${year}${month}${day}${random}`;
    }
  }
}
</script>

<style lang="scss" scoped>
.dormitory-checkout {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }

    .header-actions {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .detail-section {
    margin-top: 20px;

    h4 {
      margin: 0 0 10px;
      color: #303133;
    }

    p {
      margin: 0;
      color: #606266;
      line-height: 1.6;
    }

    .checkout-remark {
      margin: 5px 0 0;
      font-size: 13px;
      color: #909399;
    }
  }

  .unit {
    margin-left: 10px;
    color: #606266;
  }
}
</style>       this.$message.success('退宿办理完成')
      this.checkoutDialogVisible = false
    },
    handleAdd() {
      this.addDialogVisible = true;
      this.addForm = {
        applicant: '',
        roomNo: '',
        bedNo: '',
        checkoutTime: '',
        reason: ''
      };
    },
    submitAdd() {
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          try {
            this.submitting = true;
            
            // 构造新的退宿申请数据
            const newCheckout = {
              applyNo: this.generateApplyNo(),
              ...this.addForm,
              checkinTime: new Date().toLocaleDateString() // 这里用当前日期模拟，实际应从系统获取
            };
            
            // TODO: 调用后端API保存数据
            // await this.$http.post('/api/dormitory-checkout/add', newCheckout);
            
            // 添加到待办理列表
            this.pendingList.unshift(newCheckout);
            
            this.$message.success('新增退宿申请成功');
            this.addDialogVisible = false;
          } catch (error) {
            this.$message.error('新增失败：' + error.message);
          } finally {
            this.submitting = false;
          }
        }
      });
    },
    generateApplyNo() {
      const date = new Date();
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const random = String(Math.floor(Math.random() * 1000)).padStart(3, '0');
      return `TS${year}${month}${day}${random}`;
    }
  }
}
</script>

<style lang="scss" scoped>
.dormitory-checkout {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }

    .header-actions {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .detail-section {
    margin-top: 20px;

    h4 {
      margin: 0 0 10px;
      color: #303133;
    }

    p {
      margin: 0;
      color: #606266;
      line-height: 1.6;
    }

    .checkout-remark {
      margin: 5px 0 0;
      font-size: 13px;
      color: #909399;
    }
  }

  .unit {
    margin-left: 10px;
    color: #606266;
  }
}


</style> 

      this.$message.success('退宿办理完成')
      this.checkoutDialogVisible = false
    },
    handleAdd() {
      this.addDialogVisible = true;
      this.addForm = {
        applicant: '',
        roomNo: '',
        bedNo: '',
        checkoutTime: '',
        reason: ''
      };
    },
    submitAdd() {
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          try {
            this.submitting = true;
            
            // 构造新的退宿申请数据
            const newCheckout = {
              applyNo: this.generateApplyNo(),
              ...this.addForm,
              checkinTime: new Date().toLocaleDateString() // 这里用当前日期模拟，实际应从系统获取
            };
            
            // TODO: 调用后端API保存数据
            // await this.$http.post('/api/dormitory-checkout/add', newCheckout);
            
            // 添加到待办理列表
            this.pendingList.unshift(newCheckout);
            
            this.$message.success('新增退宿申请成功');
            this.addDialogVisible = false;
          } catch (error) {
            this.$message.error('新增失败：' + error.message);
          } finally {
            this.submitting = false;
          }
        }
      });
    },
    generateApplyNo() {
      const date = new Date();
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const random = String(Math.floor(Math.random() * 1000)).padStart(3, '0');
      return `TS${year}${month}${day}${random}`;
    }
  }
}
</script>

<style lang="scss" scoped>
.dormitory-checkout {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }

    .header-actions {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .detail-section {
    margin-top: 20px;

    h4 {
      margin: 0 0 10px;
      color: #303133;
    }

    p {
      margin: 0;
      color: #606266;
      line-height: 1.6;
    }

    .checkout-remark {
      margin: 5px 0 0;
      font-size: 13px;
      color: #909399;
    }
  }

  .unit {
    margin-left: 10px;
    color: #606266;
  }
}
</style>       this.$message.success('退宿办理完成')
      this.checkoutDialogVisible = false
    },
    handleAdd() {
      this.addDialogVisible = true;
      this.addForm = {
        applicant: '',
        roomNo: '',
        bedNo: '',
        checkoutTime: '',
        reason: ''
      };
    },
    submitAdd() {
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          try {
            this.submitting = true;
            
            // 构造新的退宿申请数据
            const newCheckout = {
              applyNo: this.generateApplyNo(),
              ...this.addForm,
              checkinTime: new Date().toLocaleDateString() // 这里用当前日期模拟，实际应从系统获取
            };
            
            // TODO: 调用后端API保存数据
            // await this.$http.post('/api/dormitory-checkout/add', newCheckout);
            
            // 添加到待办理列表
            this.pendingList.unshift(newCheckout);
            
            this.$message.success('新增退宿申请成功');
            this.addDialogVisible = false;
          } catch (error) {
            this.$message.error('新增失败：' + error.message);
          } finally {
            this.submitting = false;
          }
        }
      });
    },
    generateApplyNo() {
      const date = new Date();
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const random = String(Math.floor(Math.random() * 1000)).padStart(3, '0');
      return `TS${year}${month}${day}${random}`;
    }
  }
}
</script>

<style lang="scss" scoped>
.dormitory-checkout {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }

    .header-actions {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .detail-section {
    margin-top: 20px;

    h4 {
      margin: 0 0 10px;
      color: #303133;
    }

    p {
      margin: 0;
      color: #606266;
      line-height: 1.6;
    }

    .checkout-remark {
      margin: 5px 0 0;
      font-size: 13px;
      color: #909399;
    }
  }

  .unit {
    margin-left: 10px;
    color: #606266;
  }
}